<template>
	<view>
		<!--搜索-->
		<view class="search_con" data-url="/pages/home/search/search" bindtap="fun_jump">
			<i class="iconfont icon-sousuo"></i>
			<button @click="funSearch">搜索</button>
			<view class="con">
				<input placeholder="输入商品名称进行查询" @input="iKeyword" :value='keyword' />
			</view>
		</view>
		<!--热门搜索-->
		<view class="hot_con" v-if="isSearch==false">
			<view class="title">热门搜索</view>
			<view class="con">
				<text v-for="item in list_hot" @click="funChoiceHot(item.ch_title)">{{item.ch_title}}</text>
			</view>
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
		<view class="product_con" v-if="isSearch">
			<view class="con" v-for="item in list" @click="funHref('/pages/product/detail?pro_id='+item.pro_id)">
				<image :src="item.pro_imgs" mode="widthFix"></image>
				<view class="imp">
					<text>{{item.pro_title}}</text>
					<!-- <view class="tag"><em>增大</em><em>润滑</em></view> -->
					<view class="price">
						￥{{item.pro_price.toFixed(2)}}<i>￥{{item.pro_marketPrice.toFixed(2)}}</i></view>
				</view>
			</view>
		</view>
		<!--空信息-->
		<view class="nodata_con" v-if="isSearch&&isLoading==false&&list.length<=0">
			<label class="iconfont icon-meiyoushuju"></label>
			<text>{{$t('no_data')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: true,
				keyword: '', //关键字
				list_hot: [], //热门搜索
				index: 1, //页数
				size: 10, //条数
				list: [], //列表值
				isSearch: false, //是否搜索
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('search')
			})
		},
		onLoad(options) {
			var _this = this;
			if(options.keyword) {
				_this.keyword = options.keyword;
				_this.funSearch();
			}

			//获取热门搜索
			_this.fun_request("/Api/Channel/GetList", {
				ch_kindId: 2
			}, function(res) {
				_this.list_hot = res.data;
				//加载完成
				_this.isLoading = false;
			});
		},
		onPullDownRefresh() { //下拉刷新
			var _this = this;
			//清空还原
			_this.index = 1;
			_this.list = [];
			_this.getData();
		},
		onReachBottom() { //上拉到底部刷新
			var _this = this;
			_this.index = _this.index + 1;
			_this.getData();
		},
		methods: {
			getData: function() { //获取内容
				var _this = this;
				_this.isLoading = true;
				_this.fun_request("/Api/Product/GetPageList", {
					index: _this.index,
					size: _this.size,
					count: 0,
					keyword: _this.keyword
				}, function(res) {
					console.log(res);
					var _list = res.data;
					_this.list = _this.list.concat(_list);
					//加载完成
					_this.isLoading = false;
					//下拉刷新 - 停止
					uni.stopPullDownRefresh();
				});
			},
			funSearch: function() { //点击搜索
				var _this = this;

				_this.isSearch = true;
				//清空还原
				_this.index = 1;
				_this.list = [];
				_this.getData();
			},
			funChoiceHot: function(hot) { //选择关键字
				var _this = this;

				_this.keyword = hot;
				_this.isSearch = true;
				//清空还原
				_this.index = 1;
				_this.list = [];
				_this.getData();
			},
			iKeyword(e) { //文本框 - 关键字
				this.keyword = e.detail.value;
				if (this.keyword == '') this.isSearch = false;
			},
			funHref: function(url) { //跳转
				this.fun_navigateTo(url);
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
		padding-top: 0;
	}
</style>
